<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .h1 {
      color: #333333;
      font-size: 18px;
      font-weight: bold;
      line-height: 40px;
    }

    .h2 {
      color: #222222;
      font-size: 17px;
      font-weight: bold;
      line-height: 32px;
    }
  </style>
</head>

<body>
  <div style="width: 848px; margin: 0 auto; font-size: 14px;">
    <div style="color: #8f7357; line-height: 100px; text-align: center; font-size: 24px;">2020-11-17</div>
    <div style="text-align: center; height: 34px; border-bottom: 2px solid #303336;"><span
        style="background-color: #303336; font-size: 20px; color: #fff; display: inline-block; line-height: 24px; padding: 4px;">
        SSR 概念 </span></div>
    <div style="padding-top: 40px;">
      <!-- <div class="h1">loader:</div>
      <ul>
        <li>像是一个个不同的车间 把我们的模块加工成可以使用的文件 loader只是加载模块的环节工作</li>
      </ul> -->
    </div>
    <div class="h1">什么是渲染:</div>
    <ul>
      <li>把 数据 + 模板 拼接到一起的过程</li>
      <li>本质就是字符串的解析替换</li>
    </ul>
    <div class="h1">传统的服务端渲染:</div>
    <ul>
      <li>早期的web页面渲染都是在服务端进行</li>
      <li>服务端根据数据和模板生成html直接给客户端</li>
      <li>前后端代码完全耦合，不利于开发和维护</li>
      <li>前端没有足够的发挥空间 因为大部分都是在后端进行</li>
      <li>加大服务端压力</li>
      <li>用户体验一般 因为要查看另一个网页必须重新刷新请求一遍</li>
    </ul>
    <div class="h1">客户端渲染</div>
    <ul>
      <li>请求一个URL 服务端返回一个空的html 和 指引性的代码</li>
      <li>客户端再ajax请求渲染所需数据 服务端查库 返回数据给客户端 客户端根据数据渲染页面</li>
      <li>首屏渲染慢</li>
      <li>不利于SEO</li>
    </ul>
    <div class="h1">为什么首屏渲染慢？</div>
    <ul>
      <li>客户端渲染要执行至少3次的http请求周期</li>
      <li>第一个是空页面的请求</li>
      <li>第二次是js的请求</li>
      <li>第三次是动态数据的请求</li>
      <li>服务端渲染是页面直出 服务端直接把渲染好的html返回给客户端</li>
    </ul>
    <div class="h1">为什么不利于SEO？</div>
    <ul>
      <li>SPA单页应用的SEO几乎为0</li>
      <li>因为搜索引擎需要获取网页的内容 服务端渲染可以让搜索引擎拿到首页的HTML字符串</li>
      <li>而客户端渲染的单页应用初始首页一般没有内容 都是通过ajax拿到动态数据再用JS渲染出网页内容</li>
    </ul>
    <div class="h1">现代化的服务端渲染（同构渲染 = 后端渲染 + 前端渲染）</div>
    <ul>
      <li>请求一个URL， 服务端查询页面所需数据 渲染出首页的HTML和客户端SPA脚本 返回给客户端</li>
      <li>客户端接收到首屏HTML直接渲染出首页 再通过页面中的脚本将当前页面激活为SPA应用</li>
      <li>之后的所有交互和渲染都是由客户端进行 服务端只负责首屏的渲染</li>
    </ul>
    <div class="h1">同构渲染SSR的确定</div>
    <ul>
      <li>开发条件限时更大 因为项目需要同时在服务端和客户端都可运行 所以有些特定代码需要额外的区分环境</li>
      <li>比如：浏览器的某些特定代码只能跑在某些生命周期中 一些外部扩展库不能直接在服务端运行</li>
      <li>同时也不能在服务端渲染期间操作DOM</li>
      <li>造成更大的服务的负载 占用大量服务的CPU资源</li>
      <li>构建：客户端渲染仅需要构建客户端应用 SSR需要构建两个端</li>
      <li>部署：客户端渲染CSR可以部署在任意的web服务器中，SSR仅能部署在node.js Server</li>
    </ul>
    

    <!-- <div class="h1">总结:</div>
    <ul>
      <li>脚手架是构建一个项目的整体架构和规范 不是特指一个工具</li>
    </ul> -->
  </div>
</body>

</html>